<template>
	<view class="l-box-pf-t wh100">
		<head-nav :left="true" :back="true" :title="title" color="#ffffff" :centre="true" :bgColor="bgColor" inputWidth="100%"></head-nav>
		<camera class="wh100" device-position="back" :flash="flash" mode="scanCode" @scancode="scancode" @error="error">
			<cover-image @click="is_flash" class='c_img_glim' src="/static/images/glim.png"></cover-image>
			<!-- <cover-image @click="chooseImage" class='c_img_album' src="/static/images/album.png"></cover-image> -->
			<cover-view v-show="showLine" class='scan-animation' :animation="animation"></cover-view>
			<cover-view @click="$Function.LinkTo('/pages/home/number','Rd')" class='scan-text c-tc c-color-f c-t65'>手动输入编号</cover-view>
		</camera>
	</view>
</template>

<script>
	import headNav from '@/components/head.vue';
	// 移动动画
	
	export default {
		name:"camera",
		data() {
			return {
				title: '扫码',
				bgColor: 'rgba(0,0,0,0)',
				flash: 'off',
				animation: uni.createAnimation({}),
				windowHeight: (uni.getStorageSync('systemInfo').windowHeight) * 0.57,
				scanCode_success: true, //扫码是否成功
				showLine: false
			};
		},
		components:{headNav},
		methods:{
			//调用相册
			chooseImage() {
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
				        console.log(JSON.stringify(res.tempFilePaths));
				    }
				});
			},
			//打开手电
			is_flash() {
				this.flash = this.flash == 'off'?'on': 'off'
			},
			// 扫码成功
			scancode(e) {
				if(this.scanCode_success) {
					this.scanCode_success = false
					let result = e.detail.result
					this.$store.dispatch('scan_Code',{eleId:result})
					setTimeout(() => {
						this.scanCode_success = true
					}, 2000)
				}
			},
			
			donghua(){
				var that = this;
				let animation = this.animation
				// 控制向上还是向下移动
				let m = true
				setTimeout(() => {this.showLine= true}, 2800)
				setInterval(function () {
					  if (m) {
						animation.translateY(that.windowHeight+'px').step({ duration: 3000 })
						m = !m;
					  } else {
						animation.translateY(0).step({ duration: 3000 })
						m = !m;
					  }
			
					that.animation= animation.export()
				}.bind(this), 3000)
			}
		},
		onLoad() {
		},
		onShow(){
			this.donghua()
		},
	}
</script>

<style lang="scss" scoped>
	.c_img_album{
		width: 50rpx;height: 50rpx;border-radius: 50%;position: absolute;bottom: 60px;right: 10%;background: rgba(0, 0, 0, 0.8);padding: 20rpx;
	}
	.c_img_glim{
		width: 80rpx;height: 80rpx;border-radius: 50%;position: absolute;bottom: 60px;left: 50%;transform: translateX(-70rpx);background: rgba(0, 0, 0, 0.8);padding: 30rpx;
	}
	.scan-animation {
	  position: absolute;top: 90px;left: 10%;width: 80%;height: 8rpx;background-color: #08FDFE;border-radius: 50%;
	}
	.scan-text{
		position: absolute;bottom: 130px;left: 0;width: 100%;padding: 30rpx 0 50rpx;
	}
</style>
